<template>
  <div class="template">
    <div class="main">
      <div class="a_title">
        <h5>标题：</h5>
        <el-input placeholder="请输入文章标题" v-model="inputv" style="width:70%;" id='title'></el-input>
      </div>
      <div class="a_title">
        <h5>标签：</h5>
        <div id="label_item" class="a_label_item"  @mouseenter="mouseenter1(index)" @mouseleave="leave1(index)"  v-for='(item,index) in items' :key='index'>
          {{item.name}}
          <span v-if=' item.isActive==true' @click="dele(index)"  @mouseenter="mouseenter(index)" @mouseleave="leave(index)" v-bind:class="{'isClose': item.isClose }">x</span>
        </div>
        <div  v-if='showInputV == false' class="addLabel" @click="showInput()">+</div>
        <el-input  v-if='showInputV == true' style="width:15%;" v-model="addLabel" placeholder="" @keyup.enter.native.13="currentPage($event)" />
      </div>
      <div class="a_title">
        <h5>图片：</h5>
        <el-upload  action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div class="a_title">
        <h5>内容：</h5>
        <el-input placeholder="请输入文章内容"  type="textarea" v-model="inputa" style="width:70%;"></el-input>
      </div>
    </div>
    <div class="send">
      <div class="send_btn"><div class="" /></div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showInputV: false,
      addLabel: '',
      inputv: '',
      inputa: '',
      dialogImageUrl: '',
      dialogVisible: false,
      items: [{isActive: false, name: '热血', isClose: false}, {isActive: false, name: '热血', isClose: false}]
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    mouseenter (index) {
      this.items[index].isClose = true
    },
    leave (index) {
      this.items[index].isClose = false
    },
    mouseenter1 (index) {
      this.items[index].isActive = true
    },
    leave1 (index) {
      this.items[index].isActive = false
    },
    dele (index) {
      console.log(index)
    },
    showInput () {
      this.showInputV = true
      this.addLabel = ''
    },
    currentPage (e) {
      this.showInputV = false
      console.log(e.target.value)
    }
  }
}
</script>
<style scoped>
.template{
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #f7f7f7;
  width: 100%;
  min-height: 300px;
  padding: 0 200px;
}
.send{
  width: 50%;
  min-height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.send_btn{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #6ECBF9;
  margin-top: 150px;
  cursor: pointer;
}
.send_btn div{
  background: url('../assets/img/send.png') no-repeat center/60%;
  width: 80px;
  height: 80px;
}
.main{
  /* width: 100%; */
  background: #f7f7f7;
  border-radius: 10px;
  padding: 30px;
}
.a_title{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
  flex-wrap: wrap;
}
.a_label_item{
  padding: 2px 10px;
  border-radius: 5px;
  margin: 0 5px;
  background: #6ECBF9;
  color: #fff;
  cursor: pointer;
}
span{
  color: #888;
  font-size: 12px;
}
.isClose{
  color: #000;
  font-size: 16px;
}
.addLabel{
  height: 25px;
  margin:0 5px;
  color: #6ECBF9;
  cursor: pointer;
  padding: 0 20px;
  border: 1px dashed #6ECBF9;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
}
</style>
